<template>
  <div>
    <a-form-model layout="inline" ref="form" :model="form" style="margin-top:0px;">
      <a-form-model-item label="箱号">
        <a-input v-model="form.codeLike" />
      </a-form-model-item>
      <a-form-model-item label="箱态">
        <a-select v-model="form.emptyOrHeavy" style="width:120px;">
          <a-select-option :value="1">空箱</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="船名/航次">
        <a-input v-model="form.shipNameLike" />
      </a-form-model-item>
      <a-form-model-item label="持箱人">
        <a-select v-model="form.holderId" style="width:200px;">
          <a-select-option value>全部</a-select-option>
          <a-select-option
            v-for="(item,index) in holderList"
            :key="index"
            :value="item.id"
          >{{item.name}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- <a-form-model-item label="所在港口">
        <a-select v-model="form.portId" style="width:120px;">
          <a-select-option value>全部</a-select-option>
          <a-select-option
            v-for="(item,index) in portList"
            :key="index"
            :value="item.id"
          >{{item.name}}</a-select-option>
        </a-select>
      </a-form-model-item>-->
      <a-form-model-item label="箱属">
        <a-input v-model="form.containerBelongLike" />
      </a-form-model-item>
      <a-form-model-item label="箱况">
        <a-select v-model="form.containerStatus" style="width:120px;">
          <a-select-option value>全部</a-select-option>
          <a-select-option value="A">A</a-select-option>
          <a-select-option value="COMMON">普通</a-select-option>
          <a-select-option value="BROKEN">坏箱</a-select-option>
          <a-select-option value="DIRTY">污箱</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="是否到用箱期">
        <a-select v-model="form.isContainerExpire" style="width:120px;">
          <a-select-option value>全部</a-select-option>
          <a-select-option :value="1">是</a-select-option>
          <a-select-option :value="0">否</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="箱型">
        <a-select v-model="form.containerTypeId" style="width:120px;">
          <a-select-option value>全部</a-select-option>
          <a-select-option
            v-for="(item,index) in containerList"
            :key="index"
            :value="item.id"
          >{{item.name}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item class="contain_tim">
        <a-select v-model="form.dateSearchType" style="width:100px;">
          <a-select-option :value="1">卸船日期</a-select-option>
          <a-select-option :value="2">提重日期</a-select-option>
          <a-select-option :value="3">返空日期</a-select-option>
          <a-select-option :value="4">提空日期</a-select-option>
          <a-select-option :value="5">反重日期</a-select-option>
          <a-select-option :value="6">装船日期</a-select-option>
        </a-select>
        <a-range-picker
          :value="createValue"
          @change="timeOnChange"
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
        >
          <a-icon slot="suffixIcon" type="calendar" />
        </a-range-picker>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="check">查询</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="showModal">箱号批量查询</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="confirmLoad">确定预装船</a-button>
      </a-form-model-item>
    </a-form-model>
    <a-table
      :columns="columns"
      :loading="loading"
      :data-source="data"
      :scroll="{x: 3200}"
      style="margin-top:25px;"
      :pagination="pagination"
      :row-key="(record,index) => index"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <template slot="company" slot-scope="record">
        <a v-if="record.shipOrderCode" @click="company(record)">{{record.shipOrderCode}}</a>
        <span v-else>--</span>
      </template>
      <template slot="status" slot-scope="record">
        <span v-if="record.containerStatus === 'A'">A</span>
        <span v-else-if="record.containerStatus === 'COMMON'">普通</span>
        <span v-else-if="record.containerStatus === 'BROKEN'">坏箱</span>
        <span v-else-if="record.containerStatus === 'DIRTY'">污箱</span>
      </template>
      <span
        slot="day"
        slot-scope="record"
        :style="record.availableDay < record.usedDay ? 'color:red' : ''"
      >{{record.usedDay}}</span>
    </a-table>
    <a-modal
      v-model="checkVisible"
      title="箱号批量查询"
      :body-style="{padding:'30px 40px 25px'}"
      :width="600"
      centered
      okText="查询"
      @cancel="cancelCheck"
      @ok="containerCheck"
      destroyOnClose
    >
      <a-textarea v-model="containerValue" placeholder="请输入箱号进行查询" :auto-size="{ minRows: 6 }" />
      <div style="margin-top:10px">*输入时请注意，每行一个箱号</div>
    </a-modal>
  </div>
</template>
<script>
import {
  queryPortNameList,
  queryHolderNameList,
  queryContainerTypeList
} from '@/api/boxManagementCenter'
import {
  queryContainerFlowListForAdvanceLoad,
  advanceLoadContainerFromContainerCenter
} from '@/api/orderCenter'
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '箱号',
    dataIndex: 'containerNo'
  },
  {
    title: '封号',
    customRender: (text, record, index) => {
      return record.containerSealNo ? record.containerSealNo : '--'
    }
  },
  {
    title: '运单号',
    width: 150,
    customRender: (text, record, index) => {
      return record.seagoingShipOrderCode ? record.seagoingShipOrderCode : '--'
    }
  },
  {
    title: '公司编号',
    width: 150,
    scopedSlots: {
      customRender: 'company'
    }
  },
  {
    title: '是否调空箱入场',
    width: 150,
    customRender: (text, record, index) => {
      return record.enterIsEmpty === 1 ? '是' : '否'
    }
  },
  {
    title: '箱型',
    dataIndex: 'containerType'
  },
  {
    title: '持箱人',
    dataIndex: 'holder'
  },
  {
    title: '箱属',
    dataIndex: 'containerBelong'
  },
  {
    title: '箱况',
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '箱态',
    customRender: (text, record, index) => {
      return record.emptyOrHeavy === 1 ? '空' : '重'
    }
  },
  {
    title: '货重（吨）',
    customRender: (text, record, index) => {
      return record.goodsWeight ? record.goodsWeight : '--'
    }
  },
  {
    title: '所在港口',
    dataIndex: 'portName'
  },
  {
    title: '始发港',
    dataIndex: 'startPortName'
  },
  {
    title: '目的港',
    dataIndex: 'endPortName'
  },
  {
    title: '船名/航次',
    width: 180,
    dataIndex: 'voyage'
  },
  {
    title: '卸船日期',
    width: 150,
    customRender: (text, record, index) => {
      return record.enterTime ? record.enterTime : '--'
    }
  },
  {
    title: '可用箱期（天）',
    dataIndex: 'availableDay',
    width: 150
  },
  {
    title: '已用箱天数',
    scopedSlots: {
      customRender: 'day'
    }
  },
  {
    title: '提重日期',
    width: 150,
    customRender: (text, record, index) => {
      return record.getHeavyTime ? record.getHeavyTime : '--'
    }
  },
  {
    title: '返空日期',
    width: 150,
    customRender: (text, record, index) => {
      return record.returnEmptyTime ? record.returnEmptyTime : '--'
    }
  },
  {
    title: '反重日期',
    width: 150,
    customRender: (text, record, index) => {
      return record.returnHeavyTime ? record.returnHeavyTime : '--'
    }
  },
  {
    title: '装卸费（元）',
    customRender: (text, record, index) => {
      return record.enterHandlingFee ? record.enterHandlingFee : '--'
    }
  },
  {
    title: '备注',
    width: 150,
    customRender: (text, record, index) => {
      return record.remark ? record.remark : '--'
    }
  }
]
const defaultForm = () => ({
  codeLike: '', // 箱号
  holderId: '',
  shipNameLike: '', // 船名/航次
  containerBelongLike: '', // 箱属
  containerStatus: '', // 箱况 A(“A”),COMMON(“普通”),BROKEN(“坏箱”),DIRTY(“污箱”)
  dateSearchType: 1, // 日期类型 1、卸船 2、提重 3、返空 4、提空 5、反重 6、装船
  emptyOrHeavy: 1, // 箱态：1空，2重
  portId: '', // 港口id
  isContainerExpire: '', // 是否到期 1是 0否
  containerTypeId: '', // 箱型id
  startDate: '',
  endDate: ''
})
export default {
  name: 'unload',
  props: {
    containerObj: Object
  },
  data () {
    return {
      createValue: [],
      form: {
        ...defaultForm()
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      holderList: [],
      containerList: [],
      portList: [],
      selectedRowKeys: [],
      selectedRows: [],
      containerValue: '',
      checkVisible: false,
      containerNoList: [],
      pagination: {}
    }
  },
  methods: {
    portListRequest (e) {
      queryPortNameList(e)
        .then(res => {
          this.portList = res.data
        })
        .catch(rs => { })
    },
    holderListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderList = res.data
        })
        .catch(rs => { })
    },
    containerListRequest (e) {
      queryContainerTypeList(e)
        .then(res => {
          this.containerList = res.data
        })
        .catch(rs => { })
    },
    flowListRequest (e) {
      this.loading = true
      queryContainerFlowListForAdvanceLoad(e)
        .then(res => {
          // console.log(res.data.list)
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            pageSizeOptions: ['10', '30', '50', '100', '500'],
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                ...this.form,
                pageNum: this.pageNum,
                pageSize: this.pageSize
              }
              this.flowListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                ...this.form,
                pageNum: this.pageNum,
                pageSize: this.pageSize
              }
              this.flowListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => { })
    },
    loadFromContainerRequest (e) {
      advanceLoadContainerFromContainerCenter(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('预装成功！')
            this.selectedRowKeys = []
            this.selectedRows = []
            this.createValue = []
            this.pageNum = 1
            this.pageSize = 10
            Object.assign(this.form, defaultForm())
            setTimeout(() => {
              this.$emit('setContainerVisible', true)
            }, 500)
          }
        })
        .catch(rs => { })
    },
    timeOnChange (date, dateString) {
      this.createValue = date
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    check () {
      this.form.portId = this.containerObj.portId
      this.pageNum = 1
      this.flowListRequest({
        ...this.form,
        containerNoList: this.containerNoList,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      // // console.log(selectedRowKeys)
      //   // console.log(selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    confirmLoad () {
      let _t = this
      let selectNum = 0
      let idList = []
      _t.selectedRows.forEach(v => {
        idList.push(v.id)
        selectNum++
      })
      if (_t.selectedRows.length === 0) {
        _t.$message.warning('请先勾选集装箱后再进行操作')
        return false
      }
      // console.log(idList)
      const h = _t.$createElement
      _t.$confirm({
        title: h('div', {}, [
          h('span', '确定预装船此'),
          h(
            'span',
            {
              style: {
                padding: '0 3px',
                color: 'orange',
                fontSize: '20px',
                lineHeight: '22px'
              }
            },
            selectNum
          ),
          h('span', '个集装箱？')
        ]),
        onOk () {
          _t.loadFromContainerRequest({
            idList: idList,
            portId: _t.containerObj.portId,
            voyageId: _t.containerObj.voyageId
          })
        }
      })
    },
    company (e) {
      window.open(`/orderCenter/order/detail/${e.orderShipId}`, '_blank')
    },
    showModal () {
      this.checkVisible = true
    },
    containerCheck () {
      let containerNoList = this.containerValue.split(/[\s\n]/)
      // // console.log(containerNoList)
      if (containerNoList.length === 1 && containerNoList[0] === '') {
        containerNoList = []
      }
      this.containerNoList = containerNoList
      this.form.portId = this.containerObj.portId
      this.flowListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        containerNoList: containerNoList
      })
      setTimeout(() => {
        this.cancelCheck()
      }, 200)
    },
    cancelCheck () {
      this.checkVisible = false
    }
  },
  watch: {
    containerObj () {
      if (this.containerObj) {
        this.createValue = []
        Object.assign(this.form, defaultForm())
        let { portId } = this.containerObj
        this.form = { ...this.form, portId }
        this.portListRequest({
          status: 1,
          isContainerManagement: 1
        })
        this.holderListRequest({})
        this.containerListRequest({})
        this.flowListRequest({
          ...this.form,
          containerNoList: [],
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
      }
    }
  },
  mounted () {
    // // console.log(this.containerObj)
    let { portId } = this.containerObj
    this.form = { ...this.form, portId }
    this.portListRequest({
      status: 1,
      isContainerManagement: 1
    })
    this.holderListRequest({})
    this.containerListRequest({})
    this.flowListRequest({
      ...this.form,
      containerNoList: [],
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  }
}
</script>
